<div class="container-tight py-4">
    <div class="text-center mb-4">
        <a href="."><img src="/mix-app/css/portal/img/mixcore-logo-red-2.svg" alt="Mixcore CMS" height="36"></a>
    </div>
    <div class="card card-md">
        <div class="card-body text-center py-4 p-sm-5">
            <img src="/mix-app/css/portal/img/illustrations/undraw_Profile_re_4a55.svg" height="128" class="mb-n2"
                height="120" alt="">
            <h1 class="mt-5">Portal</h1>
            <p class="text-muted">Hi! Let's create your new account.</p>
        </div>
        <div class="hr-text hr-text-center hr-text-spaceless">register form</div>
        <div class="card-body p-5">

            <form class="" ng-class="{'submitted': submitted}" ng-submit="register()">

                <div class="mb-3">
                    <label class="form-label">Username</label>
                    <input ng-model="user.username" class="form-control" required placeholder="Handsome..." />
                </div>
                <div class="mb-3">
                    <label class="form-label"> Password </label>
                    <input ng-model="user.password" type="password" required class="form-control"
                        placeholder="MyC0mpl3xP@ssw0rd" />
                </div>
                <div class="mb-3">
                    <label class="form-label"> Confirm Password </label>
                    <input ng-model="user.confirmPassword" type="password" required class="form-control"
                        placeholder="MyC0mpl3xP@ssw0rd" />
                </div>

                <div class="mb-3">
                    <label class="form-label">Email address </label>
                    <input ng-model="user.email" class="form-control" type="email" required
                        placeholder="your-email-address@domain.com" type="text" />
                </div>
                <div class="mb-3 mb-5">
                    <label class="form-check">
                        <input ng-model="user.isAgreed" class="form-check-input" type="checkbox" required />
                        <span class="custom-control-label">
                            I agree to the
                            <a href="https://mixcore.org/terms-and-conditions.html" target="_blank">terms and
                                conditions</a>.</span>
                    </label>
                </div>

                <!-- <hr> -->
                <div class="form-footer text-center">
                    <button type="submit" class="btn btn-primary btn-block px-5">
                        Register
                    </button>
                    <p class="text-danger" ng-bind="error"></p>
                    <button ng-click="goToSiteUrl('/')" type="button" class="btn btn-link">
                        Back to Home page
                    </button>
                    |
                    <button ng-click="goToSiteUrl('/security/login?ReturnUrl=%2Fportal')" type="button"
                        class="btn btn-link">
                        Login
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>